<template>
  <view class="">
    <u-popup :show="authType !== ''" :round="10" mode="bottom" closeable @close="close">
      <view v-if="authType === 'smsLogin'" class="p-20">
        <view class="text-18 font-bold pb-20">绑定手机号</view>
        <view class="text-light">为了您的账户安全，请使用本人手机号码</view>

        <!-- <u-verification-code>
        </u-verification-code> -->
        <view class="py-20">
          <u-form ref="uFormRef" label-position="left" :label-width="60" :model="form" :rules="rules">
            <u-form-item label="手机号:" prop="phone">
              <u-input v-model="form.phone" />
            </u-form-item>
            <u-form-item label="验证码:" prop="code">
              <view class="flex-a">
                <view class="flex-1">
                  <u-input v-model="form.code" />
                </view>
                <view class="flex-shrink ml-10">
                  <u-code ref="uCodeRef" :seconds="60" @change="codeChange" />
                  <u-button :custom-style="{width:'100px', height: '38px'}" :disabled="!$.utils.isMobile(form.phone)" type="info" @click="getCode">
                    <text class="text-12">{{ codeTips }}</text>
                  </u-button>
                </view>
              </view>
            </u-form-item>
            <view class="mt-20">
              <u-button size="large" type="primary">
                <text class="text-16">绑定</text>
              </u-button>
            </view>
          </u-form>
        </view>

        <view class="" />
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import $ from '@/sheep'
const userStore = $.store('user')
const uCodeRef = ref(null)

const codeTips = ref('')

function codeChange(value) {
  codeTips.value = value
}

function getCode() {
  uCodeRef.value.start()
}

// 授权弹窗类型
const authType = computed(() => userStore.authType)

const { form } = $.useForm({
  phone: '',
  code: '',
  login_code: ''
})
const rules = {
  phone: {
    type: 'number',
    required: true,
    message: '请填写手机号',
    pattern: /^1[3456789]\d{9}$/,
    trigger: ['blur', 'change']
  },
  code: {
    type: 'number',
    min: 4,
    max: 6,
    message: '请填写验证码',
    trigger: ['blur', 'change']
  }
}

function close() {
  userStore.setAuthType('')
}
</script>

<style>
</style>
